<style>
.weui-cell_access .weui-cell__ft:after {
  display: none;
}
</style>
<template>
  <div :style="{ fontSize:fontSize + 'px'}" class="laboratory">
    <v-labheader
      :title="step[idx - 1]"
      :backText="country_cn"
      :isShadown="true"
      :back="idx !== 5"
      v-on:goBack="goBack">
    </v-labheader>
    <v-loadline
      v-if="idx !== 5"
      style="padding-top: 62px;"
      :width="25 * idx + '%'"></v-loadline>
    <v-networkerr v-if="networkState === 'offline'" v-on:reload="getIab"></v-networkerr>
    <div v-else class="cantainer" style="display: flex;flex-direction: column;justify-content: space-around;" :style="{ height: '80%' }">
      <div class="index-title" style="height: 0.1em">{{index_title}}<a v-show="idx === 1" style="color: #4D66FF;margin-left: 3px;">可多选</a></div>
      <div style="height: 110%;display: flex;justify-content: center;align-items: center;">
        <transition name="lab" mode="out-in">
        <div class="styles_content labBox" key="styles" v-if="idx === 1">
          <div class="styleCard"
               v-for="(item, idx) in lab.style"
               v-if="item"
               style="padding-left: 12%; width: 34%;transition: all 0s;margin-bottom: 1em;position: relative"
               :style="{ fontWeight: item.active ? 'bold' : 'normal' }"
               :class="{ activeButton : item.active }"
               @click="selectedStyle(item, idx)">
            <a style="z-index: 999;font-size: 1em;">{{item.name.value}}</a>
            <img style="position: absolute;height: 100%;width: 100%;left: 0;top: 0;z-index: 1" :src="item.active ? require('../../assets/img/style_icon/' + item.name.value + '_active.png')
              : require('../../assets/img/style_icon/' + item.name.value + '.png')  "/>
          </div>
        </div>
        <div class="country_content labBox" style="width: 100%;justify-content: flex-start" key="country" v-if="idx === 2">
          <div class="styleCard countryCard"
               v-for="(value, key, idx) in lab.stockPool"
               v-if="value"
               :class="{ activeCountryCard : value.name.active }"
               @click="selectedCountry(key, idx)">
            <a>{{value.name.value}}</a>
            <img v-show="value.name.active" :src="require('../../assets/img/guoqi/' + value.name.value + '国旗.png')"></img>
          </div>
        </div>
        <div key="lab" v-if="idx === 3" style="transform: translateY(-30px);width: 100%">
          <div style="display: flex;align-items: center;font-weight: 500">基准<span style="color: #FE7A4A;margin-left: 3px;font-size: 0.7em;">》</span></div>
          <div class="lab_content labBox" style="justify-content: flex-start;min-height: 2em;padding: 0.5em 0;align-items: center">
            <div class="styleCard labCard"
                v-if="value"
                :class="{ activeButton : value.active }"
                style="margin: 0 2.667% 0.4em 2.667%"
                v-for="(value, key, idx) in lab.stockPool[country].benchmark"
                @click="selectedBenchmark(key, idx)">
                {{value.value}}
            </div>
          </div>
          <div style="display: flex;align-items: center;font-weight: 500">
            股票池
            <span style="color: #FE7A4A;margin-left: 3px;font-size: 0.7em;">》</span>
            </div>
          <div class="lab_content labBox" style="justify-content: flex-start;min-height: 2em;padding: 0.5em 0;align-items: center;">
            <div class="styleCard labCard"
                v-if="value"
                style="margin: 0 2.667% 0.4em 2.667%"
                :class="{ activeButton : value.active }"
                v-for="(value, key, idx) in lab.stockPool[country].choice"
                @click="selectedChoice(key, idx)">
              {{value.name.value}}
            </div>
          </div>
          <div style="display: flex;align-items: center;font-weight: 500">调仓方式<span style="color: #FE7A4A;margin-left: 3px;font-size: 0.7em;">》</span></div>
          <div class="lab_content labBox" style="justify-content: flex-start;min-height: 2em;padding: 0.5em 0;align-items: center;">
            <div class="styleCard labCard"
                v-for="(item, idx) in lab.timing"
                :class="{ activeButton : item.active }"
                style="margin: 0 2.667% 0.4em 2.667%"
                @click="selectedTimingMethod(item, idx)">
              {{item.name.value}}
            </div>
          </div>
          <div style="display: flex;align-items: center;font-weight: 500">优化方式<span style="color: #FE7A4A;margin-left: 3px;font-size: 0.7em;">》</span></div>
          <div class="lab_content labBox" style="justify-content: flex-start;min-height: 2em;padding: 0.5em 0;align-items: center;padding: 0.8em 0">
            <div class="styleCard labCard"
                v-if="value"
                v-for="(value, key, idx) in lab.optimizeMethod"
                :class="{ activeButton : value.active }"
                style="margin: 0 2.667% 0.4em 2.667%"
                @click="selectedOptimizeMethod(key, idx)">
              {{value.name.value}}
            </div>
          </div>
          <div style="display: flex;align-items: center;font-weight: 500">
            股票个数
          <span style="color: #FE7A4A;margin-left: 3px;font-size: 0.7em;">》</span>
          </div>
          <!--<div class="styleCard numberCard" style="margin-bottom: 1em;" :class="{'errHandlerQuantity' : errhandler.quantity}">
            <input class="numIpt"
                   type="number"
                   pattern="[0-9]*"
                   v-model="quantity"
                   placeholder="请输入股数" />
            <div class="numBtn">
              <span class="numBtn_ numBtn_plus"
                    :class="{ errNumBtnHander : parseInt(quantity) + 10 > maxLength  }"
                    @click="changeQuantity('plus')"><i class="iconfont icon-jiahao1"></i></span>
              <span class="numBtn_ numBtn_sub"
                    :class="{ errNumBtnHander : parseInt(quantity) - 10 < styleLen || quantity === '' }"
                    @click="changeQuantity('sub')"><i class="iconfont icon-jian"></i></span>
            </div>
          </div> -->
          <div class="lab_content labBox" style="justify-content: flex-start;min-height: 2em;padding: 0.5em 0;align-items: center;">
            <div class="styleCard labCard"
                  v-for="i in quantityList"
                  @click="quantity = i"
                  :class="{ activeButton : quantity === i }"
                  style="margin: 0 2.667% 0.4em 2.667%">
              {{i}}
            </div>
          </div>
          <transition name="enter">
            <a class="errTip" style="margin-bottom: 1.5em;" v-show="errhandler.quantity">不得小于所选风格个数 ({{styleLen}}) 、大于股票池最大数量 ({{maxLength}})</a>
          </transition>
          <div style="display: flex;align-items: center;margin-bottom: 1em;font-weight: 500">测试时间<span style="color: #FE7A4A;margin-left: 3px;font-size: 0.7em;">》</span></div>
          <div class="styleCard numberCard">
            <span @click="openDatePick('startDate')"
                  style="display: flex; justify-content: center;align-items: center;height: 100%;width: 100%"
                  v-show="startDate === ''">
                <i style="font-size: 1.8em;" data="fastClick" class="iconfont icon-riliicon"></i></span>
            <div v-show="startDate !== ''" class="time">
              <span class="date startDate">
                <datetime ref="startDate"
                          style="color: #7A7AAB"
                          data="fastClick"
                          clear-text="开始时间"
                          :start-date="startYear"
                          :end-date="new Date(new Date().setDate(new Date().getDate() - 7)).toString()"
                          :max-year="new Date().getFullYear()"
                          v-model="startDate"></datetime>
              </span>
              <span>······</span>
              <span @click="openDatePick('endDate')"
                    class="date endDate">
                <i v-show="endDate === ''" style="font-size: 1.8em;" data="fastClick" class="iconfont icon-riliicon"></i>
                <datetime ref="endDate"
                          v-show="endDate !== ''"
                          v-model="endDate"
                          data="fastClick"
                          style="color: #7A7AAB"
                          :start-date="oD"
                          :end-date="new Date().toString()"
                          clear-text="结束时间"></datetime>
              </span>
            </div>
          </div>
        </div>
        <div class="lab_content labBox" key="lab" v-if="idx === 4">
            <a class="stepStr">
            最后一步
            <span style="color: #FE7A4A;font-size: 0.7em;transform: rotate(90deg);display: inline-block">》</span>
            </a>
            <input
              type="text"
              ref="labnameinput"
              @keyup.enter="nextStep"
              class="lab_name"
              placeholder="为您的实验策略取一个响亮的名字"
              v-model="lab_name" />
            <span style="display: block;margin: 15px auto 150px auto; text-align: center">好名字不超过八个字哦</span>
        </div>
        <div class="lab_content labBox" key="lab" v-if="idx === 5">
          <div class="lastStep">
            <img class="img" src="../../assets/img/Bitmap@3x.png" />
            <div class="title">策略正在火速测试中</div>
            <div class="desc">可在往期测试中查看该测试进度，完成时间预计一天</div>
          </div>
        </div>
      </transition>
      </div>
      <div class="navigotar_bar">
        <template v-if="idx !== 5">
          <div v-if="idx !== 4 && idx !== 5" @click="checkLeave" class="nextStep" style="width: 9em;border-radius: 9px;">
            <a>返回往期测试</a>
          </div>
          <div class="nextStep" :class="{ activeButton : isOk, completeBtn : idx === 4 }" @click="nextStep">
            <a v-if="idx !== 4"><i class="icon iconfont icon-fanhui1" style="font-size: 1.7em"></i></a>
            <a style="font-size: 1.5em" v-else>完成</a>
          </div>
        </template>
        <div v-else style="width: 100%;margin-top: 0.8em;">
          <div @click="refresh" class="nextStep activeButton complateBtn">再创建一个实验</div>
          <div @click="gotoPage" class="nextStep activeButton complateBtn">查看往期实验</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Datetime } from 'vux'
import { Toast, MessageBox } from 'mint-ui'

export default {
  name: 'newLab',
  components: {
    Datetime,
    MessageBox
  },
  data () {
    return {
      navigator: navigator,
      idx: 1,
      step: [
        '选择风格',
        '选择国家',
        '选择条件',
        '为实验命名',
        '完成创建'
      ],
      index_titles: [
        '为您的实验测略选择风格',
        '为您的实验测略选择国家'
      ],
      index_title: '为您的实验测略选择风格',
      country: '',
      country_cn: '',
      fontSize: 12,
      lab_name: '',
      isOk: false,
      refreshLab_name: '',
      isCheckStep2: false,
      lab: {
        style: []
      },
      postLab: {
        benchmark: '',
        country: '',
        endDate: '',
        name: '',
        optMethod: '',
        quantity: 0,
        startDate: '',
        stockPool: '',
        styles: []
      },
      startDate: '',
      endDate: '',
      oD: '1990-00-00',
      startYear: '2007-01-01',
      quantity: 5,
      quantityList: [5, 10, 20],
      optMethod: '',
      maxLength: 500,
      networkState: 'online',
      styleLen: 0,
      errhandler: {
        quantity: false,
        startDate: false
      }
    }
  },
  watch: {
    idx: function (val) {
      val === 3 ? this.country_cn = this.lab.stockPool[this.country].name.value : this.country_cn = ''
      this.checkStep()
      this.index_title = this.index_titles[val - 1]
    },
    startDate: function (val) {
      let D = new Date(val)
      let oD = new Date(D.setDate(D.getDate() + 7)).toLocaleString().split(' ')[0]
      this.oD = new Date(oD).getMonth() < 9 ?
      `${new Date(oD).getFullYear()}-0${new Date(oD).getMonth() + 1}-${new Date(oD).getDate()}`
      :`${new Date(oD).getFullYear()}-${new Date(oD).getMonth() + 1}-${new Date(oD).getDate()}`
      if (this.endDate !== '') val > this.endDate ? this.endDate = this.oD : ''
      this.checkStep3()
    },
    endDate: function (val) {
      this.checkStep3()
    },
    quantity: function (val) {
      if (val < this.styleLen) {
        this.errhandler.quantity = true
      } else if (val > this.maxLength) {
        this.errhandler.quantity = true
      } else {
        this.errhandler.quantity = false
      }
      this.checkStep3()
    },
    lab_name: function (val) {
      if (val.length > 8 || val.length === 0) {
        this.isOk = false
      } else {
        this.isOk = true
        // TODO: 特殊字符验证
        // this.$set(this, 'isOk', !this.$config.regexpValidate.special_character.reg.test(val))
        // console.log('reg', !this.$config.regexpValidate.special_character.reg.test(val), 'isOk', this.isOk)
      }
    }
  },
  methods: {
    // 工具类函数
    refresh () {
      this.refreshLab_name = this.lab_name
      let recursion = (obj) => {
        Object.keys(obj).forEach((item, idx) => {
          if (typeof obj[item] === 'object') {
            if (obj[item].active) obj[item].active = false
            recursion(obj[item])
          }
        })
      }
      recursion(this.lab)
      this.startDate = ''
      this.endDate = ''
      this.lab_name = ''
      this.quantity = 8
      this.isCheckStep2 = false
      this.idx = 1
    },
    checkLeave () {
      MessageBox.confirm('确认要离开吗？').then(action => {
        this.refreshLab_name === '' ?
        this.$router.push(`/laboratory`) :
        this.$router.push(`/laboratory?lab_name=${this.refreshLab_name}`)
      })
    },
    gotoPage () {
      this.$destroy()
      this.$router.push('/laboratory?lab_name=' + this.lab_name)
    },
    changeQuantity (value) {
      if (this.quantity === '') {
        this.quantity = 10
        return
      }
      if (value === 'plus') {
        if (parseInt(this.quantity) + 10 > this.maxLength) return
        this.quantity = parseInt(this.quantity) + 10
      } else {
        if (parseInt(this.quantity) - 10 < this.styleLen) return
        this.quantity = parseInt(this.quantity) - 10
      }
    },
    goBack () {
      this.idx !== 1 ? this.idx-- : this.$router.go('-1')
    },
    openDatePick (val) {
      this.$refs[val].$el.click()
    },
    nextStep () {
      if (this.idx === 4) {
        this.complateLab()
        return
      }
      this.isOk ? this.idx++ : this.feedback()
    },
    feedback () {
      const feedback = [
        '请至少选择一种风格',
        '请选择国家',
        '请检查所有选项',
        '请完善实验名称'
      ]
      Toast({
        message: feedback[this.idx - 1],
        duration: 1000
      })
    },
    checkStep () {
      this.isOk = false
      switch (this.idx) {
        case 1:
          this.isOk = true
        break
        case 2:
          if (this.isCheckStep2) this.isOk = true
        break
        case 3:
          this.checkStep3()
        break
        case 4:
          (this.lab_name.length < 9 && this.lab_name.length > 0) ? this.isOk = true : this.isOk = false
        break
        default:
        break
      }
    },
    checkStep3 () {
      Promise.all([
        this.checkStep3Benchmark(),
        this.checkStep3Choice(),
        this.checkStep3OptimizeMethod(),
        this.checkStep3TimingMethod(),
        this.endDate !== '' ? Promise.resolve() : Promise.reject(),
        !this.errhandler.quantity ? Promise.resolve() : Promise.reject()
      ]).then(val => {
        this.isOk = true
      }).catch(err => {
        this.isOk = false
      })
    },
    checkStep3Benchmark () {
      return new Promise((resolve, reject) => {
        let num = false
        Object.keys(this.lab.stockPool[this.country].benchmark).forEach((item, idx) => {
          if (!this.lab.stockPool[this.country].benchmark[item]) return
          if (this.lab.stockPool[this.country].benchmark[item].active) num = true
        })
        num ? resolve() : reject()
      })
    },
    checkStep3Choice () {
      return new Promise((resolve, reject) => {
        let num = false
        Object.keys(this.lab.stockPool[this.country].choice).forEach((item, idx) => {
          if (!this.lab.stockPool[this.country].choice[item]) return
          if (this.lab.stockPool[this.country].choice[item].active) num = true
        })
        num ? resolve() : reject()
      })
    },
    checkStep3TimingMethod () {
      return new Promise((resolve, reject) => {
        let ok = false
        this.lab.timing.forEach((item, idx) => {
          if (item.active) ok = true
        })
        ok ? resolve() : reject()
      })
    },
    checkStep3OptimizeMethod () {
      return new Promise((resolve, reject) => {
        let num = false
        Object.keys(this.lab.optimizeMethod).forEach((item, idx) => {
          if (!this.lab.optimizeMethod[item]) return
          if (this.lab.optimizeMethod[item].active) num = true
        })
        num ? resolve() : reject()
      })
    },
    // checkStep3Quantity () {
    //   return new Promise((resolve, reject) => {

    //   })
    // }
    // 访问数据类函数
    getIab () {
      if (!this.$store.state.networkState) {
        this.getIabByCache(this.$config.cacheTime.offlineCache)
        return
      }
      window.localStorage.getItem('lab') ? this.getIabByCache(this.$config.cacheTime.onlineCache) : this.getIabByNetwork()
    },
    getIabByCache (min) {
      this.$plugins.cacheControl.getCache('lab', min).then((res) => {
        this.lab = res.data
      }).catch((err) => {
        if (!this.$store.state.networkState) {
          this.networkState = 'offline'
          return
        }
        this.getIabByNetwork()
      })
    },
    getIabByNetwork () {
      this.baseService.get('/v1/lab/para').then((res) => {
        let recursion = (obj) => {
          Object.keys(obj).forEach((item, idx) => {
            if (typeof obj[item] === 'object') {
              obj[item].active = false
              recursion(obj[item])
            } else if (typeof obj[item] === 'string') {
              obj[item] = {
                value: obj[item],
                active: false
              }
            }
          })
        }
        recursion(res.data)
        this.lab = res.data
        this.$plugins.cacheControl.setCache('lab', this.lab)
      }).catch((err) => {
        if (err === 'timeout') {
          this.$plugins.cacheControl.getCache('lab', this.$config.cacheTime.offlineCache).then((res) => {
            this.lab = res.data
          }).catch((err) => {
            this.networkState = 'offline'
          })
        }
      })
    },
    complateLab () {
      this.postLab = {
        styles: [],
        country: this.country,
        startDate: this.startDate,
        endDate: this.endDate,
        name: this.lab_name,
        benchmark: '',
        optMethod: this.optMethod,
        quantity: parseInt(this.quantity),
        stockPool: ''
      }
      this.lab.style.forEach((item, idx) => {
        if (!item) return
        if (item.active) this.postLab.styles.push(item.code.value)
      })
      Object.keys(this.lab.stockPool[this.country].benchmark).forEach((item, idx) => {
        if (item === 'active') return
        if (this.lab.stockPool[this.country].benchmark[item].active) this.postLab.benchmark = item
      })
      Object.keys(this.lab.stockPool[this.country].choice).forEach((item, idx) => {
        if (item === 'active') return
        if (this.lab.stockPool[this.country].choice[item].active) this.postLab.stockPool = item
      })
      this.lab.timing.forEach((item, idx) => {
        if (item.active) this.postLab.timing = item.value
      })
      if (this.isOk) {
        this.baseService.post('/lab/save', this.postLab).then((res) => {
          this.idx++
        }).catch((err) => {

        })
      }
    },
    // 单选类函数
    selectedStyle (item, idx) {
      this.lab.style[idx].active ? this.styleLen-- : this.styleLen++
      this.lab.style[idx].active = !this.lab.style[idx].active
      this.styleLen !== 0 ? this.isOk = true : this.isOk = false
    },
    selectedCountry (key, idx) {
      Object.keys(this.lab.stockPool).forEach((item, idx) => {
        if (!this.lab.stockPool[item]) return
        this.lab.stockPool[item].name.active = false
      })
      this.lab.stockPool[key].name.active = true
      this.country = key
      this.isOk = true
      this.isCheckStep2 = true
    },
    selectedBenchmark (key, idx) {
      Object.keys(this.lab.stockPool[this.country].benchmark).forEach((item, idx) => {
        if (!this.lab.stockPool[this.country].benchmark[item]) return
        this.lab.stockPool[this.country].benchmark[item].active = false
      })
      this.lab.stockPool[this.country].benchmark[key].active = true
      this.checkStep3()
    },
    selectedChoice (key, idx) {
      Object.keys(this.lab.stockPool[this.country].choice).forEach((item, idx) => {
        if (!this.lab.stockPool[this.country].choice[item]) return
        this.lab.stockPool[this.country].choice[item].active = false
      })
      this.lab.stockPool[this.country].choice[key].active = true
      this.maxLength = this.lab.stockPool[this.country].choice[key].quantity - 1
      if (this.quantity > this.maxLength) this.quantity = this.maxLength
      this.checkStep3()
    },
    selectedOptimizeMethod (key, idx) {
      Object.keys(this.lab.optimizeMethod).forEach((item, idx) => {
        if (!this.lab.optimizeMethod[item]) return
        this.lab.optimizeMethod[item].active = false
      })
      this.lab.optimizeMethod[key].active = true
      this.optMethod = key
      this.startYear = this.lab.optimizeMethod[key].startDate.value
      this.checkStep3()
      if (this.startDate !== '') {
        if (this.startDate < this.startYear) {
          this.startDate = this.startYear
          this.errhandler.startDate = true
          setTimeout(() => {
            this.errhandler.startDate = false
          }, 1000)
        }
      }
    },
    selectedTimingMethod (item, idx) {
      this.lab.timing.forEach((item, idx) => {
        item.active = false
      })
      item.active = true
      this.checkStep3()
    }
  },
  created () {
    this.fontSize = this.fontSize * document.body.offsetWidth / 320
    this.getIab()
  },
  activated () {

  },
  mounted () {

  }
}
</script>

<style scoped lang="less">
.cantainer {
  padding: 0 2em;
  padding-top: 2em;
}

.navigotar_bar {
  display: flex;
  justify-content: space-between;
}
.activeButton {
  background: #607BFF;
  color: white !important;
  box-shadow: 0 0 6px 0 rgba(77,99,235,0.39) !important;
}

.activeCountryCard {
  color: white !important;
  box-shadow: 0 0 6px 0 rgba(77,99,235,0.39) !important;
  justify-content: flex-start !important;
  font-weight: 500;
  align-items: flex-end !important;
  transition: all 0.5s;
  transform: rotateY(180deg);
  img {

  }
  a {
    transform: rotateY(180deg);
    font-weight: 500;
    font-size: 1em;
  }
}

.labBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.styleCard {
  box-shadow: 0 1px 4px 0 rgba(102,102,102,0.50);
  transition: all 0.3s;
  border-radius: 0.47em;
  background-repeat: no-repeat;
  justify-content: center;
  background-size: 100% 100%;
  width: 46%;
  font-size: 1.2em;
  height: 3.8em;
  margin: 0.3em 0;
  align-items: center;
  color: #7A7AAB;
  display: flex;
}

.countryCard {
  width: 22% !important;
  height: 3.8em !important;
  margin: 0 1.5% !important;
  margin-bottom: 1.2em !important;
  font-size: 1.2em !important;
  letter-spacing: 4px;
  background-size: 100% 100%;
  img {
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    transition: all 0.5s;
    transform: rotateY(180deg);
  }
  a {
    z-index: 2;
  }
}

.errTip {
  display: flex;
  background: #fcf8e3;
  border: 1px solid transparent;
  align-items: center;
  justify-content: center;
  border-color: #faebcc;
  color: #8a6d3b;
  padding: 0.5em;
  font-size: 0.8em;
  border-radius: 4px;
  margin: 0 2.667%;
}

.labCard {
  width: 28% !important;
  box-shadow: 0 0 6px 0 rgba(102,102,102,0.3) !important;
  height: 2em !important;
  font-size: 1em !important;
}



.numberCard {
  width: 94.66% !important;
  height: 2.5em;
  display: flex;
  margin-left: 2.667%;
  margin-right: 2.667%;
  .time {
    display: flex;
    height: 100%;
    width: 100%;
    span {
      display: flex;
      flex: 1;
    }
    span:nth-child(2) {
      justify-content: center;
      align-items: center;
      color: #F84949;
    }
    .date {
      flex: 3;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .numIpt {
    border: 0;
    height: 60%;
    width: 60%;
    margin-left: 25px;
    border-right: 1px solid #eee;
    border-radius: 0;
  }
  .numBtn {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .numBtn_ {
      display: flex;
      transition: all 0.3s;
      justify-content: center;
      align-items: center;
      height: 2.08em;
      width: 2.08em;
      margin: 0 5px;
      box-shadow: 0 2px 4px 0 rgba(102,102,102,0.20);
      border-radius: 50%;
      border: 1px solid rgba(102,102,102,0.20);
    }
  }
}

.nextStep {
  border: 1px solid rgb(77, 99, 235);
  color: rgb(77, 99, 235);
  width: 6em;
  height: 3em;
  display: flex;
  justify-content: center;
  transition: background 0.3s;
  align-items: center;
  border-radius: 5px;
}
.lab_name {
  width: 94%;
  height: 2.5em;
  border: 0px solid #000;
  border-radius: 10px;
  font-size: 1.1em;
  background: #EDF1F5;
  padding: 0 3%;
  margin: 0 auto;
  &::-webkit-input-placeholder {
    text-align: center
  }
}
.stepStr {
  font-size: 1.2em;
  display: block;
  font-weight: 500;
  width: 100%;
  text-align: center;
  margin: 1em 0 3em 0;
}

.completeBtn {
  width: 100% !important;
}
.index-title {
  margin-bottom: 2em;
  font-size: 1.4em;
  font-weight: 400;
  color: #666666;
}
.errNumBtnHander {
  background: #eee;
}


.errHandlerQuantity {
  box-shadow: 0 1px 4px 0 rgba(255, 0, 0, 0.5) !important
}
.lastStep {
  margin: 0 auto;
  .title {
    font-size: 1.5em;
    color: #607BFF;
    text-align: center;
    font-weight: 500;
  }
  .desc {
    font-size: 0.8em;
    margin-top: 0.2em;
  }
  img {
    display: block;
    width: 15em;
    height: 15em;
    margin: 6em auto 1em auto;
  }
}
.nextStepBtn {
  display: inline-flex !important;
  width: 100% !important;
  margin: 0 !important;
}
.nextStepBtn:nth-child(1) {
  margin-right: 2% !important;
}
.complateBtn {
  width: 90%;
  margin: 0 5%;
  background: #FE7A4A;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30) !important;
  border-radius: 9px;
  height: 3em;
  margin-top: 1.5em;
  border: 1px solid #FE7A4A;
}
</style>
